import { CSSProperties } from "react"
import { create } from "zustand"

export interface Component {
  id: number
  name: string
  props: any
  styles?: CSSProperties
  desc: string
  children?: Component[]
  parentId?: number
}

interface State {
  components: Component[]
  curComponentId: number | null
  curComponent: Component | null
}

interface Actions {
  addComponent: (component: Component, parentId?: number) => void
  deleteComponent: (componentId: number) => void
  updateComponentProps: (componentId: number, updatedProps: any) => void
  updateComponentStyles: (
    componentId: number,
    updatedStyle: any,
    replace?: boolean
  ) => void
  setCurComponentId: (componentId: number | null) => void
}

export const useComponentsStore = create<State & Actions>((set, get) => ({
  components: [
    {
      id: 1,
      name: "Page",
      props: {},
      desc: "页面",
    },
  ],
  curComponentId: null,
  curComponent: null,
  addComponent: (component, parentId) => {
    set((state) => {
      if (parentId) {
        const parentComponent = getComponentById(parentId, state.components)
        if (parentComponent) {
          if (parentComponent.children) {
            parentComponent.children.push(component)
          } else {
            parentComponent.children = [component]
          }
        }

        component.parentId = parentId
        return { components: [...state.components] }
      }

      return { components: [...state.components, component] }
    })
  },
  deleteComponent: (componentId) => {
    if (!componentId) return

    const component = getComponentById(componentId, get().components)

    if (component?.parentId) {
      const parentComponent = getComponentById(
        component.parentId,
        get().components
      )

      if (parentComponent) {
        parentComponent.children = parentComponent?.children?.filter(
          (child) => child.id !== componentId
        )

        set({ components: [...get().components] })
      }
    }
  },
  updateComponentProps: (componentId, updatedProps) => {
    set((state) => {
      // 1. 找到这个组件
      const component = getComponentById(componentId, state.components)
      // 2.判断是否存在
      if (component) {
        // 3. 更新这个组件的props
        component.props = updatedProps
        return { components: [...state.components] }
      }
      // 3. 更新这个组件
      return { components: [...state.components] }
    })
  },
  updateComponentStyles: (componentId, styles, replace) => {
    set((state) => {
      // 1. 找到这个组件
      const component = getComponentById(componentId, state.components)
      // 2.判断是否存在
      if (component) {
        // 3. 更新这个组件的props
        component.styles = replace
          ? { ...styles }
          : { ...component.styles, ...styles }
        return { components: [...state.components] }
      }
      return { components: [...state.components] }
    })
  },
  setCurComponentId(componentId) {
    set((state) => {
      return {
        curComponentId: componentId,
        curComponent: getComponentById(componentId, state.components),
      }
    })
  },
}))

export function getComponentById(
  id: number | null,
  components: Component[]
): Component | null {
  if (!id) return null

  for (const component of components) {
    if (component.id == id) return component
    if (component.children && component.children.length > 0) {
      const result = getComponentById(id, component.children)
      if (result !== null) return result
    }
  }
  return null
}
